Angular Material এ MatTree কম্পোনেন্ট ব্যবহার করে আপনি একটি ডাইনামিক ট্রি তৈরি করতে পারেন, যা ডাটা হায়ারার্কি বা নেস্টেড (nested) ডাটা প্রদর্শন করার জন্য উপযোগী। ডাইনামিক ট্রি তৈরি করার জন্য, Angular Material-এর MatTree এবং MatTreeNode কম্পোনেন্ট ব্যবহার করা হয়।

এটি সাধারণত ডাটা-ড্রিভেন বা ফাইল সিস্টেম লিস্টের মতো ডাটা দেখানোর জন্য ব্যবহার করা হয়। এই কম্পোনেন্টটি ব্যবহারকারীর জন্য একটি সহজ এবং ইনটুইটিভ ট্রি-ভিউ প্রদান করে, যা সহজে নেভিগেট করা যায়।

ডাইনামিক ট্রি তৈরি করার ধাপ

১. প্রয়োজনীয় মডিউল ইমপোর্ট করা

প্রথমে, MatTreeModule এবং MatIconModule আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে, যাতে আপনি ট্রি এবং আইকন ব্যবহার করতে পারেন।

import { MatTreeModule } from '@angular/material/tree';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  imports: [
    MatTreeModule,
    MatIconModule
  ]
})
export class AppModule { }

২. ডাটা মডেল তৈরি করা

ডাইনামিক ট্রি তৈরি করতে ডাটা মডেল তৈরি করতে হবে। আমরা একটি nested ডাটা ব্যবহার করবো যেখানে প্রতিটি উপাদান (node) অন্য উপাদান (children) ধারণ করতে পারে।

interface TreeNode {
  name: string;
  children?: TreeNode[];
}

const TREE_DATA: TreeNode[] = [
  {
    name: 'Fruit',
    children: [
      { name: 'Apple' },
      { name: 'Orange' },
      { name: 'Banana' }
    ]
  },
  {
    name: 'Vegetables',
    children: [
      { name: 'Carrot' },
      { name: 'Broccoli' }
    ]
  },
  {
    name: 'Grains',
    children: [
      { name: 'Rice' },
      { name: 'Wheat' }
    ]
  }
];

এখানে, TreeNode ইন্টারফেসে name এবং একটি অপশনাল children অ্যারে দেওয়া হয়েছে, যা শিশু উপাদান (nested nodes) ধারণ করতে পারে।

৩. ডাইনামিক ট্রি কম্পোনেন্ট তৈরি করা

এখন HTML ফাইলে mat-tree কম্পোনেন্ট ব্যবহার করে ট্রি তৈরি করা যাবে। mat-tree এর মাধ্যমে আপনি ট্রী নোড (node) এবং তার চাইল্ড নোড (children) হ্যান্ডেল করতে পারবেন।

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
    <li>
      <div class="mat-tree-node">
        <mat-icon matTreeNodeToggle>expand_more</mat-icon>
        <span>{{ node.name }}</span>
      </div>
    </li>
  </mat-tree-node>

  <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodeToggle>
    <li>
      <div class="mat-tree-node">
        <mat-icon matTreeNodeToggle>expand_more</mat-icon>
        <span>{{ node.name }}</span>
      </div>
      <mat-tree [dataSource]="node.children" [treeControl]="treeControl"></mat-tree>
    </li>
  </mat-tree-node>
</mat-tree>

এখানে:

• mat-tree: এটি ট্রি কম্পোনেন্ট যা ডাটা সোর্স এবং ট্রি কন্ট্রোল নিবে।
• mat-tree-node: এটি ট্রি নোডের জন্য টেমপ্লেট। এখানে *matTreeNodeDef ডিরেকটিভ দ্বারা ট্রি নোডের জন্য একটি উপস্থাপনা সংজ্ঞায়িত করা হয়েছে।
• mat-icon: টুলটিপে আইকন প্রদর্শনের জন্য ব্যবহৃত।
• mat-tree-node-toggle: এটি ট্রি নোডের জন্য টগল অপারেশন সক্রিয় করে (expand এবং collapse)।

৪. ট্রি কন্ট্রোল এবং ডাটা সোর্স সেট করা

Angular এর FlatTreeControl এবং MatTreeFlatDataSource ব্যবহার করে আপনি ট্রি কন্ট্রোল এবং ডাটা সোর্স সেট করবেন।

import { Component } from '@angular/core';
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
import { FlatTreeControl } from '@angular/cdk/tree';

@Component({
  selector: 'app-tree',
  templateUrl: './tree.component.html',
  styleUrls: ['./tree.component.css']
})
export class TreeComponent {
  treeControl: FlatTreeControl<TreeNode>;
  treeFlattener: MatTreeFlattener<TreeNode, any>;
  dataSource: MatTreeFlatDataSource<TreeNode, any>;

  constructor() {
    this.treeFlattener = new MatTreeFlattener(
      this.transformer,
      this.getLevel,
      this.isExpandable,
      this.getChildren
    );
    this.treeControl = new FlatTreeControl<TreeNode>(this.getLevel, this.isExpandable);
    this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
    this.dataSource.data = TREE_DATA;
  }

  transformer(node: TreeNode, level: number): any {
    return {
      ...node,
      level
    };
  }

  getLevel = (node: any) => node.level;

  isExpandable = (node: any) => !!node.children;

  getChildren = (node: TreeNode): TreeNode[] => node.children;

  hasChild = (_: number, node: TreeNode) => !!node.children;
}

এখানে:

• MatTreeFlattener: এটি মূল ট্রি ডাটা (nested structure) কে ফ্ল্যাট (flat) করে, যার মাধ্যমে আপনি নোডের লেভেল, এক্সপ্যান্ডেবল প্রপার্টি এবং চাইল্ডস সহজে ট্র্যাক করতে পারবেন।
• FlatTreeControl: এটি ট্রি কন্ট্রোল তৈরি করে, যা ট্রি নোডের লেভেল এবং এক্সপ্যান্ডেবল প্রপার্টি হ্যান্ডেল করে।
• MatTreeFlatDataSource: এটি ফ্ল্যাট ডাটা সোর্স তৈরি করে যা MatTree কম্পোনেন্টে ডাটা প্রদান করে।

৫. স্টাইলিং এবং কাস্টমাইজেশন

ট্রির ডিজাইন এবং আউটপুট কাস্টমাইজ করতে CSS বা SCSS ব্যবহার করা যায়। উদাহরণস্বরূপ, ট্রি নোডের স্টাইল পরিবর্তন করা:

.mat-tree-node {
  display: flex;
  align-items: center;
  padding: 5px 10px;
}

.mat-tree-node span {
  margin-left: 8px;
}

.mat-tree-node mat-icon {
  cursor: pointer;
}

এখানে, ট্রি নোডের মধ্যে আইকন এবং টেক্সটের মাঝে মার্জিন এবং প্যাডিং দেয়া হয়েছে, এবং আইকনগুলিকে ক্লিকযোগ্য (pointer) করা হয়েছে।

Angular Material এর MatTree কম্পোনেন্ট ব্যবহার করে ডাইনামিক এবং কাস্টমাইজযোগ্য ট্রি তৈরি করা সম্ভব। এটি আপনার অ্যাপ্লিকেশনে নেস্টেড ডাটা বা হায়ারার্কিক্যাল ডাটা প্রদর্শন করতে সাহায্য করে। Angular Material এর FlatTreeControl এবং MatTreeFlatDataSource ব্যবহার করে আপনি সহজেই ট্রি কন্ট্রোল এবং ডাটা সোর্স কাস্টমাইজ করতে পারেন। CSS বা SCSS ব্যবহার করে আপনি ট্রি কম্পোনেন্টের ডিজাইনও কাস্টমাইজ করতে পারবেন।